<!DOCTYPE html>
<html>

<head>
    <title>Base - Single</title>

    <script type="text/javascript" src='/lib/jquery.js'></script>
    <script type="text/javascript" src='/src/jquery.adaptive-backgrounds.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.adaptiveBackground.run({
                shadeVariation: true,
                shadePercentage: .2
            });
        });
    </script>

    <style type="text/css">
        body {
            max-width: 500px;
            margin: 0 auto;
        }

        .img-wrap {
            height: 400px;
            width: 100%;
            margin: 5px 0;
            position: relative;
            float: left;
            text-align: center;
            border: 1px solid #eee;
        }

        .img-wrap img {
            height: 75%;
            position: relative;
            top: 12.5%;
        }
    </style>

</head>

<body>

    <div class='img-wrap'>
        <img id="img" src="images/fb-icon.png" data-adaptive-background>
    </div>

    <div class='img-wrap'>
        <img id="img" src="images/twitter-icon.png" data-adaptive-background>
    </div>

</body>

</html>